Make the report form's layout clearer #186
Merged
+1,890
−566
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Group location fields with the map and add a mobile map/manual toggle. Update keyboard-flow and validation tests for the new form order. Closes #142
The server rejects sightings dated in the future or before 1900, but the report form only showed that after a failed request. Check the date in the browser when the user leaves the field and on submit, and show the message under the field. The server still validates and stays the final check. Update the e2e server-error test to use a mocked error, since the client now catches the dates it used. Add unit and e2e tests for the new checks. AI usage: Test added using Claude Code. Closes #153
The report form asked for the duration in seconds, so a 15 minute sighting had to be entered as 900. Add a unit select (seconds, minutes or hours) next to the number input, defaulting to minutes. The form converts the value to seconds before submitting, so the API and database stay unchanged. Decimals such as 1.5 hours are allowed. Update the tests for the new label and add a test for the unit conversion. AI usage: Claude code was used to update the test. Closes #154
Move validation and duration conversion to utils/sighting-form.ts, form state and submit handling to a useSightingForm hook, and the shared field markup and location section to their own components. The page now only lays out the form. Behavior is unchanged, except that a server error on the State field now shows under it. AI usage: Claude Code was used to refactor the code. Closes #167
Let users find a location by name with a keyboard-accessible combobox. Choosing a result sets the marker and fills in the location fields. Search only runs on Enter or the button, and shares one request spacing and cache with the pin lookups, to follow Nominatim's policy. AI usage: Claude Code used to modify test Closes #175
After a failed submit, list each invalid field with its error above the submit button. Each item is a link that moves focus to its field. The summary updates as fields are fixed. Field-level errors and the focus on the first invalid field are unchanged. Closes #176
asgeija
added
bug
5 tasks
thortve
requested changes
Nov 5, 2026
thortve
approved these changes
Nov 5, 2026
asgeija
deleted the
142-iteration-4-make-the-submit-forms-layout-clearer
branch
Sign in
to join this conversation on GitHub.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
Parent issue #142: makes the report a sighting form clearer and easier to use.
SubmitSightingPage.tsxis split into smaller parts: form rules inutils/sighting-form.ts, state and submit in auseSightingFormhook, plusFormFieldandLocationSectioncomponents. Behavior is unchanged.Nominatim
The place search follows Nominatim's usage policy: it runs only on Enter or the button, never while typing. Search and pin lookups share one module that keeps requests at least a second apart, and search answers are cached for the visit. Described in
docs/sustainability.md.Testing
npm run lint,npm run test(unit) andnpm run test:e2epass.Notes for review
maxattribute. Chromium moves from the year to the hour on its own once amaxis set, which breaks keyboard entry. The check on blur gives the same feedback.AI usage
Claude Code helped refactoring the code and write/change tests. I reviewed the output and tested it.
Closes #142
Closes #153
Closes #154
Closes #167
Closes #175
Closes #176